<template>
  <div class="err404">
    <section class="box clearfix">
      <div class="img-box left">
        <img src="../assets/404.svg" alt="" />
      </div>
      <div class="info-box left">
        <h1>404</h1>
        <h3>抱歉，你访问的页面不存在</h3>
        <p><a @click="logout" href="javascript:;">返回登录页</a></p>
      </div>
    </section>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    ...mapActions('myadmin/account', ['logout'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
}
body {
  font-size: 16px;
}
.box {
  width: 850px;
  height: auto;
  margin: 200px auto;
}
.box .img-box {
  width: 400px;
  height: 400px;
  margin-right: 100px;
}
.box .info-box {
  width: 350px;
  height: 400px;
}
.box .img-box img {
  width: 100%;
  height: 100%;
}
.box .info-box {
  padding-top: 80px;
}
.box .info-box h1 {
  width: 100%;
  text-align: left;
  color: #434e59;
  font-size: 72px;
  font-weight: 600;
  line-height: 72px;
  margin-bottom: 24px;
}
.box .info-box h3 {
  width: 100%;
  text-align: left;
  color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 16px;
}
.box .info-box p {
  width: 100%;
  text-align: left;
}
.box .info-box p a {
  display: inline-block;
  padding: 6px 17px;
  background-image: none;
  border: 1px solid #1890ff;
  border-radius: 4px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
  text-decoration: none;
}
.box .info-box p a:hover {
  color: #fff;
  background-color: #40a9ff;
  border-color: #40a9ff;
}

@media screen and (max-width: 800px) {
  .box {
    width: 100%;
    padding: 20px;
    margin: 0;
  }
  .box .info-box {
    width: 100%;
    margin: 0 auto;
    padding-top: 15px;
  }
  .box .img-box {
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
  }
}
</style>
